<script></script>

<script setup>
import { ref, reactive, computed } from "vue";
import { useStore } from "vuex";
const store = useStore();
let iconList = computed(() => {
  return store.state.iconPicList;
});
</script>

<template>
  <!-- 顶部地址栏 -->
  <div class="position">
    <span class="iconfont">&#xe619;</span>
    <span class="position__word"
      >北京理工大学国防科技园2号楼10层北京理工大学国防科技园2号楼10层</span
    >
    <span class="iconfont">&#xe9eb;</span>
  </div>
  <!-- 搜索栏 -->
  <router-link to="/search">
    <div class="search">
      <span class="iconfont">&#xeace;</span>
      <div class="search__title">山姆会员商店优惠商品</div>
    </div>
  </router-link>
  <!-- banner区域 -->
  <div class="banner">
    <img
      src="http://www.dell-lee.com/imgs/vue3/banner.jpg"
      class="banner__img"
      alt=""
    />
  </div>
  <!-- navicon区域 -->
  <div class="icon">
    <div class="icon__item" v-for="(item, index) in iconList" :key="index">
      <img class="icon__item__img" :src="item.url" alt="" />
      <p class="icon__item__txt">{{ item.txt }}</p>
    </div>
  </div>
  <!-- 背景条 -->
  <div class="bgc"></div>
</template>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
@import "@/styles/mixin.scss";

.position {
  width: 100%;
  height: 0.54rem;
  // background-color: green;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 0.22rem;
  font-size: 0.16rem;
  &__word {
    color: $content-color;
    width: 2.8rem;
    @include textEli;
  }
  .iconfont {
    font-size: 0.2rem;
    font-weight: 600;
    color: $icon-color;
  }
}

.search {
  width: 100%;
  height: 0.32rem;
  border-radius: 0.16rem;
  background-color: $searchBgc-color;
  position: relative;
  color: $grey-color;
  .iconfont {
    position: absolute;
    top: 50%;
    left: 0.16rem;
    transform: translate3d(0, -50%, 0);
    font-size: 0.2rem;
  }
  &__title {
    position: absolute;
    top: 50%;
    left: 0.45rem;
    transform: translate3d(0, -50%, 0);
    font-size: 0.14rem;
  }
}

.banner {
  margin-top: 0.12rem;
  height: 0;
  overflow: hidden;
  padding-bottom: 25%;
  &__img {
    width: 100%;
  }
}

.icon {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  align-content: center;
  margin-top: 0.16rem;
  &__item {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.16rem;
    &__img {
      margin: 0 auto;
      height: 0.4rem;
      width: 0.4rem;
      margin-bottom: 0.06rem;
    }
    &__txt {
      font-size: 0.12rem;
      color: $content-color;
    }
  }
}

.bgc {
  height: 0.1rem;
  margin: 0 -0.18rem;
  background-color: $bgc-color;
}
</style>
